1. Home
  2. Section 1
  3. Current Page

Tab & Accordion Containers

The Style Guide includes two of the most utilitarian text containers in web design: Tabbed text containers and Accordion tabs. While it is technically feasible to use Accordions as a content type inside of a Tab, it is recommended to implement these container types separately.

Tab Containers

Tabbed containers are typically used when child pages are not a good option or when the content in each tab should remain within the context of the page.

About
Tab 2
Tab 3
Tab 4
Tab 5

This is the skeleton for "IMF_Content_Tabs"

This content type provides quick switching between multiple panels of information. Each panel is created through a div element, so other components can be embedded into each of the panels.

Requirements

This tabbed content requires the following:

  • jQuery 2.2.2
  • Hind and Roboto Google Fonts (http://fonts.googleapis.com/css?family=Hind|Rokkitt)
  • IMF_Content_Tabs.html
  • IMF_Content_Tabs.css
  • IMF_Typography.css
  • IMF_Content_Tabs.js

To Add/Remove Tabs

Directions on how to Add or Remove tabs are commented in IMF_Content_Tabs.html

This is Tab 2

Some text for Tab 2 goes here.

This is Tab 3

Some text for Tab 3 goes here.

This is Tab 4

Some text for Tab 4 goes here.

This is Tab 5

Some text for Tab 5 goes here.

Accordion Containers (full width)

The IMF Accordion is a text container with multiple open panels. It uses Bootstrap glyphicons for opened/closed panel icons.

There are two content styles for this accordion. One contains plain text and the other contains a list. See the Standalone Accordion for examples on both styles. Take special notice of the "list" class that is applied to the content panes that contain lists. This removes the padding from the sides of the content panels.

IMF Accordion requires the following: External:

Internal:

Accordion containers serve a similar information architecture need as tabbed containers. They are better suited for such content aggregation pages as FAQs or ordered lists requiring users to drill down into each listed item.

Content Header H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.

Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.

Narrow Accordion Containers with only one panel open at a time

Accordion containers do not always need to be the full width of the page. They can take on the widths of other text containers.

Add the attribute data-multiple-panels-open="false" to the accordion container to have only only one panel open at a time.

  • This is accordion panel number one.

  • This is accordion panel number two.

  • This accordion panel contains plain text.

    Content Header H2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.... more

  • This is accordion panel number four.

  • This is accordion panel number five, and since some titles can be extra long, this shows how it would look when a multiple line title is used in an accordion panel.

  • This is accordion panel number six.

    Notice the spacing around the edges of this panel

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.